<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <link rel="stylesheet" th:href="@{/lib/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/lib/bootstrap-icons/font/bootstrap-icons.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <th:block th:replace="~{fragments/header :: navbarStyles}"></th:block>
    <style>
        .user-card {
            transition: transform 0.2s;
        }
        .user-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .role-badge {
            font-size: 0.75rem;
        }
        .status-badge {
            font-size: 0.75rem;
        }
        .filter-section {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
        }
        .table-responsive {
            border-radius: 8px;
            overflow: hidden;
        }
        .access-denied {
            text-align: center;
            padding: 50px 20px;
            color: #6c757d;
        }
        .access-denied i {
            font-size: 4rem;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div th:replace="~{fragments/header :: navbar}"></div>
    <div class="container-fluid mt-3">
        <!-- 权限检查区域 -->
        <div id="accessDenied" class="access-denied" style="display: none;">
            <i class="bi bi-shield-exclamation"></i>
            <h3>访问被拒绝</h3>
            <p>您没有权限访问用户管理功能。</p>
            <a href="/ercms/dashboard" class="btn btn-primary">返回首页</a>
        </div>

        <!-- 用户管理内容区域 -->
        <div id="userManagementContent" style="display: none;">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">
                                <i class="bi bi-people"></i> 用户管理
                                <span id="userScopeInfo" class="badge bg-info ms-2" style="display: none;"></span>
                            </h5>
                            <div>
                                <button class="btn btn-primary" onclick="showCreateUserModal()" id="createUserBtn" style="display: none;">
                                    <i class="bi bi-plus"></i> 新建用户
                                </button>
                                <button class="btn btn-outline-secondary" onclick="refreshUsers()">
                                    <i class="bi bi-arrow-clockwise"></i> 刷新
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <!-- 权限信息提示 -->
                            <div class="alert alert-info mb-3" id="permissionInfo" style="display: none;">
                                <i class="bi bi-info-circle me-2"></i>
                                <span id="permissionText">权限信息</span>
                            </div>
                            
                            <!-- 筛选区域 -->
                            <div class="filter-section">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label for="roleFilter" class="form-label">角色筛选</label>
                                        <select class="form-select" id="roleFilter" onchange="filterUsers()">
                                            <option value="">全部角色</option>
                                            <option value="ADMIN">系统管理员</option>
                                            <option value="DEPT_MANAGER">部门管理员</option>
                                            <option value="DISPATCHER">调度员</option>
                                            <option value="END_USER">终端用户</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="departmentFilter" class="form-label">部门筛选</label>
                                        <select class="form-select" id="departmentFilter" onchange="filterUsers()">
                                            <option value="">全部部门</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="statusFilter" class="form-label">启用状态筛选</label>
                                        <select class="form-select" id="statusFilter" onchange="filterUsers()">
                                            <option value="">全部状态</option>
                                            <option value="true">启用</option>
                                            <option value="false">禁用</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="workStatusFilter" class="form-label">工作状态筛选</label>
                                        <select class="form-select" id="workStatusFilter" onchange="filterUsers()">
                                            <option value="">全部工作状态</option>
                                            <option value="AVAILABLE">可用</option>
                                            <option value="BUSY">忙碌</option>
                                            <option value="OFFLINE">离线</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="searchInput" class="form-label">搜索</label>
                                        <input type="text" class="form-control" id="searchInput" placeholder="用户名/姓名/邮箱" onkeyup="filterUsers()">
                                    </div>
                                </div>
                            </div>

                            <!-- 用户列表 -->
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead class="table-light">
                                        <tr>
                                            <th>ID</th>
                                            <th>用户名</th>
                                            <th>姓名</th>
                                            <th>邮箱</th>
                                            <th>电话</th>
                                            <th>角色</th>
                                            <th>部门</th>
                                            <th>启用状态</th>
                                            <th>工作状态</th>
                                            <th>创建时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="userTableBody">
                                        <tr>
                                            <td colspan="10" class="text-center text-muted">
                                                <i class="bi bi-hourglass-split"></i> 加载中...
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- 分页 -->
                            <nav aria-label="用户分页">
                                <ul class="pagination justify-content-center" id="pagination">
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 创建/编辑用户模态框 -->
    <div class="modal fade" id="userModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userModalTitle">创建用户</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="userForm">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="username" class="form-label">用户名*</label>
                                    <input type="text" class="form-control" id="username" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="realName" class="form-label">真实姓名 *</label>
                                    <input type="text" class="form-control" id="realName" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="email" class="form-label">邮箱</label>
                                    <input type="email" class="form-control" id="email">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="phone" class="form-label">电话</label>
                                    <input type="tel" class="form-control" id="phone">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="role" class="form-label">角色 *</label>
                                    <select class="form-control" id="role" required>
                                        <option value="">请选择角色</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="department" class="form-label">所属部门</label>
                                    <select class="form-control" id="department">
                                        <option value="">请选择部门</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="password" class="form-label">密码 *</label>
                                    <input type="password" class="form-control" id="password" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="confirmPassword" class="form-label">确认密码 *</label>
                                    <input type="password" class="form-control" id="confirmPassword" required>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="enabled" checked>
                                <label class="form-check-label" for="enabled">
                                    启用账户
                                </label>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveUser()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 查看用户详情模态框 -->
    <div class="modal fade" id="userDetailModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">用户详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="userDetailContent">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/lib/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/navbar.js}"></script>
    <script th:src="@{/js/auth.js}"></script>
    <script th:src="@{/js/permission.js}"></script>
    <script th:src="@{/js/user.js}"></script>
</body>
</html> 
